<template>
  <div class="login">
    <Particles
      id="tsparticles"
      :particles-init="particlesInit"
      class="login__particles"
      :options="particles"
    />
    <div class="login-wrap">
      <!-- title -->
      <h2 class="form-header">云小账后台管理</h2>
      <el-tabs ref="tabsRef" v-model="activeName" stretch>
        <el-tab-pane label="账号登录" name="account" class="tab-pane" />
        <el-tab-pane label="短信验证码登录" name="phone" class="tab-pane" />
      </el-tabs>
      <LoginForm v-if="activeName === 'account'" class="login-form" />
      <LoginPhone v-if="activeName === 'phone'" class="login-form" />
    </div>
  </div>
</template>

<script setup>
// components
import LoginForm from './LoginForm.vue'
import LoginPhone from './LoginPhone.vue'
// others
import { particles } from '@/utils/particles'
import { loadFull } from 'tsparticles'
import { ref } from 'vue'

// 背景
const particlesInit = async (engine) => {
  await loadFull(engine)
}
// tabs
const activeName = ref('phone')
</script>

<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #eff5f9;
}

.login-wrap {
  width: 490px;
  padding: 30px 40px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 99;
  background-color: #fff;
}
.form-header {
  font-size: 28px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 30px;
}
.el-tabs {
  margin-bottom: 40px;
}
.login-form {
  flex-grow: 1;
}
:deep(.el-tabs__header) {
  margin-bottom: 0;
}
:deep(.el-tabs__item) {
  font-size: 16px;
}
</style>
